<template>
	<view class="content">
		<view class="topBox">
		<u-navbar :border-bottom="false" :title="title"></u-navbar>
		 <u-sticky>
		 		<view class="sticky">
		 			<view class="item" @click="changePirce(1)" :class="stickyCurrent == 1 ? 'active' :'' ">
		 				综合
		 			</view>
		 			<view class="item" @click="changePirce(2)" :class="stickyCurrent == 2 ? 'active' :'' ">
		 				销量
		 			</view>
		 			<view class="item" @click="changePirce(3)" :class="stickyCurrent == 3 ? 'active' :'' ">
		 				价格
		 				<u-icon name="arrow-down-fill" :class="stickyCurrent == 3 ? 'active' :'' " v-if="up ==2"></u-icon>
		 				<u-icon name="arrow-up-fill" :class="stickyCurrent == 3 ? 'active' :'' " v-else></u-icon>
		 			</view>
		 		</view>
		 	</u-sticky>
			</view>
			<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower='lwor'>
		 		<view class="goodsBox">
		 			<!-- 瀑布流 -->
		 			<u-waterfall v-model="flowList"  ref="uWaterfall">
		 				<template v-slot:left="{leftList}">
		 					<view class="box" style="margin-right: 10upx;">
		 						<view class="items" @click="toDetail(item.goodsType,item.goodsId)" v-for="(item, index) in leftList" :key="index+item">
		 							<image :src="item.coverImgList[0]" mode="widthFix"></image>
		 							<view class="content">
		 								<view class="title">
		 									<view>{{item.goodsName}}</view>
		 								</view>
		 								<view class="bottom">
		 									<view class="left">￥<text class="price">{{ item.unitPrice }}</text></view>
		 									<view class="right">销量 {{item.sales}}</view>
		 								</view>
		 							</view>
		 						</view>
		 					</view>
		 				</template>
		 				<template v-slot:right="{rightList}">
		 					<view class="box" style="margin-left: 10upx;">
		 						<view class="items" @click="toDetail(item.goodsType,item.goodsId)" v-for="(item, index) in rightList" :key="index+item">
		 							<image :src="item.coverImgList[0]" mode="widthFix"></image>
		 							<view class="content">
		 								<view class="title">
		 									<view>{{item.goodsName}}</view>
		 								</view>
		 								<view class="bottom">
		 									<view class="left">￥<text class="price">{{item.unitPrice }}</text></view>
		 									<view class="right">销量:{{item.sales}}</view>
		 								</view>
		 							</view>
		 						</view>
		 					</view>
		 				</template>
		 			</u-waterfall>
		 		</view>
		 		<u-loadmore :status="status" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' @loadmore='laodmore' :loadText="loadText"/>
	        </scroll-view>
	</view>
</template>

<script>
	import {goodsList} from '../../api/goods/index'
	import {apiServer} from '../../config/index'
 	export default {
		components: {

		},
		data() {
			return {
				areaId:0,
				status: 'loading',
				orderType:1,
				loadText: {
						loadmore: '获取数据错误,点击重新加载',
						loading: '加载中',
						nomore: '已经到底啦'
					},
				apiServer:apiServer,
				flowList: [],
				stickyCurrent:1,
				up:0,
				keyword:'',
				pageSize: 20,
				pageNum: 1,
				pages: 0,
				search: '',
				height:0,
				isEmpty: false,
				isSearch: false,
				tabIndex: 0,
				goodList: [],
				type:null,
				goodsType:null,
			}
		},
		onLoad(option) {
			this.areaId = option.areaId;
			this.type = option.type;
			if(option.type == 1){
				this.title = "预售区"
				this.goodsType = 1
			}else if(option.type == 2) {
				this.title = "活动区"
				this.goodsType = 2
			}else if(option.type == 3){
				this.title = "预购区"
			}else if(option.type == 4) {
				this.title = "掌上衣橱"
			}
			this.getGoodsList()
		},
		onShow() {
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					let info = uni.createSelectorQuery().select(".topBox");
					info.boundingClientRect(function(data) { //data - 各种参数
						that.height = res.windowHeight - data.height
					}).exec()
				}
			});
			
		},
		methods: {
			lwor(){
				if(this.status == 'nomore'){
					// uni.showToast({
					// 	title:'已经到底啦',
					// 	icon:'none'
					// })
				}
				this.getGoodsList()
			},
			laodmore(){
				// this.pageNum = 1
				// this.getGoodsList()
			},
			getGoodsList(){
				goodsList({
						areaId:this.areaId,
						orderType:this.orderType,
						pageSize:this.pageSize,
						pageNum:this.pageNum
					}).then(res=>{
					if(res.data.obj.length < this.pageSize){
						this.status = 'nomore'
					}
					this.pageNum++
					var that = this
					setTimeout(function(){that.addRandomData(res.data.obj)},100)
				}).catch(err=>{
					this.status = 'loadmore'
				})
			},
			toDetail(goodsType,goodsId) {
				uni.navigateTo({
					url: '/pages/goodsDetail/index?goodsType=' + goodsType+'&goodsId='+goodsId
				})
			},
			addRandomData(list) {
				for(let i = 0; i < list.length; i++) {
					let index = this.$u.random(0, list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			changePirce(val){
				if(this.stickyCurrent == val && val !=3){
					return
				}
				this.stickyCurrent = val;
				if(val == 3){
				this.up == 1 ? this.up = 2 : this.up = 1;
				}else{
					this.up = 0
				}
				this.orderType = this.stickyCurrent
				if(this.orderType == 2){
					this.orderType = 4
				}
				if(this.orderType == 3){
					this.up == 1 ? this.orderType = 2:this.orderType =3
				}
				this.pageNum = 1
				this.status  = 'loading'
				this.$refs.uWaterfall.clear()
				this.getGoodsList()
			},
			// tab
			change(index, id) {
				if (index == this.tabIndex) return;
				this.tabIndex = id;
			},
			//禁止滑动
			moveHandle() {},
		},

	}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>